<script setup>
import learnCommunal from "@/components/communal/learn-communal.vue";
import searchUtil  from "@/components/utils/search-util.vue";
import {h, inject} from "vue";
import {NIcon} from "naive-ui";
import {
  Search as searchIcon
} from '@vicons/ionicons5'
import {getAllModel, selModel} from "@/res/api/model_api.js";
const {toPage} = inject("toPage")
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

// 获得所有模型
let allModelList =  ref([])
getAllModel().then(res => {
  console.log(res.data.list)
  allModelList.value = res.data.list
})

// 根据输入获得模型
const searchValue = ref("")

</script>

<template>
  <learn-communal action-key="model">
    <n-flex justify="space-between" :style="{marginTop:'1rem'}">
      <n-space vertical justify="space-around">
        <div>
          <h1>模型 model</h1>
          <p>获得开展独立数据科学项目所需的技能</p>
        </div>
        <search-util search-type="模型搜索"/>
      </n-space>
      <n-image
          preview-disabled
          :width="300"
          src="/src/assets/picture/ModelBg.png"
          class="show-img"
      />
    </n-flex>
    <n-flex vertical>
      <n-space>
        <n-image
            preview-disabled
            width="48"
            src="/src/assets/picture/show/product12.png"
            class="show-img"
        />
        <n-space vertical>
          <h2>模型大全</h2>
          <n-ellipsis :line-clamp="1">集中存储各类预训练模型，涵盖机器学习、深度学习领域，支持快速检索与部署，助力高效AI应用开发。</n-ellipsis>
        </n-space>
      </n-space>

      <n-grid x-gap="12" y-gap="18" cols="5">
        <n-gi v-for="(item,index) in allModelList" :key="index" class="item-center" >
          <n-card hoverable class="model-cart" @click="toPage('std/model/specific')">
            <template #cover>
              <n-image :src="item.modelImage"/>
            </template>
            <!-- 消息提示 -->

            <template #action>

              <n-space justify="space-between">
                <n-popover trigger="hover" style="max-width: 15rem;border-radius: 5%"
                           header-style="padding: 0;"
                           content-style="padding: 1;"
                           scrollable>
                  <template #trigger>
                    <n-button text size="small" type="primary">介绍</n-button>
                  </template>
                  <span>{{ item.modelIntroduce }}</span>
                </n-popover>
                {{ item.modelName }}
              </n-space>
            </template>
          </n-card>
        </n-gi>
      </n-grid>
    </n-flex>
  </learn-communal>
</template>

<style lang="scss" scoped>
.model-cart{
  width: 12rem;
}
</style>
